<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/tab.css" />

<section class="content-header tab-header">
	<a class="navigation" id="nav-prev"><span class="ion-arrow-left-b"></span></a>
	<ul id="main-tab" class="nav nav-pills" style="max-width:1013px; max-height:66px; display: inline-block;">
	</ul>
	<a class="navigation" id="nav-next"><span class="ion-arrow-right-b"></span></a>
	<hr style="margin: 5px 0; border: 0; border-top: 1px solid #ccc;" />
</section>
<section id="tab-content" class="content">
 <div class="row">
	 <div class="col-md-12">
	 	<button id="tabBtn1" type="button" class="btn btn-primary">打开标签1</button>
	 	<button id="tabBtn2" type="button" class="btn btn-primary">打开标签2</button>
	 	<button id="tabBtn3" type="button" class="btn btn-primary">打开标签3</button>
	 	<button id="tabBtn4" type="button" class="btn btn-primary">打开首页</button>
	 </div>
 </div>
 <hr style="margin: 5px 0; border: 0; border-top: 1px solid #ccc;" />
</section>
<script src="${pageContext.request.contextPath}/scripts/tab.js"></script>
<script>
	$(function(){
		var tab = new thx.Tab("#main-tab", "#tab-content", "#nav-prev", "#nav-next", 10);
		tab.openUrl("首页","pages/tab-content1.html",null,false,true);
		tab.openHtml("标签3",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签4",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签5",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签6",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签7",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签8",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签9",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签10",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签11",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签12",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签13",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签14",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签15",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		tab.openHtml("标签16",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		
		$("#tabBtn1").click(function(){
			tab.openUrl("标签1","pages/demo.jsp",null,true,true);
		});
	
		$("#tabBtn2").click(function(){
			tab.openHtml("标签2 标签2标签2标签2标签2标签2标签2",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		});
		
		$("#tabBtn3").click(function(){
			tab.openHtml("标签3",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		});
		
		$("#tabBtn4").click(function(){
			tab.openHtml("首页",'<div class="row"><div class="col-md-12"><h1>Hello world!</h1></div></div>');
		});
	});
</script>